<template>
	<view class="main">
			<u-overlay :show="share" @click="close" :zoom="false" :custom-style="{ background: 'rgba(0,0,0,.8)' }" :duration="0">
		
		<view class="content"  @tap.stop >
			<image class="pic" src="../static/images/share/save.png" mode="aspectFill" @click="html2canvas.create"></image>
			<view class="box" :domId="domId" id="html2canvas" ref="html2canvas">
			<img :src="$api.calendarBg" alt="" class="bg" />
			<view class="stop">				
				<view class="right">
					<text class="txt">来疯传数藏, 成为数字收藏家</text> 
					<text class="txts">全球领先的创作版权交易平台</text>
				</view>
			</view>
			<view class="cont">
				<view class="">
				<view class="title">
					疯传数藏 <text class="qr">数字藏品</text> 					
				</view>
				<view class="tips"> 
					领先的数字藏品铸造交易平台
				</view>	
				</view>
				<div class="qrcode" >
				<img :src="$api.calendarQrUrl" mode="aspectFill" class="img"></img>
				</div>
				
			</view>
			</view>
		</view>
			</u-overlay>
			
		
	</view>
	
</template>

<script>
	export default {
		name:"html2canvas",
		props:{
			domId:'',
			share:{
				type:Boolean,
				default:()=>{
					return false
				}
			},
			show:{
				type:Boolean,
				default:()=>{
					return false
				}
			},
			info:{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		data() {
			return {
				qrUrl:this.$api.calendarQrUrl,
				imgUrl:this.$api.calendarBg,
				imgHeight:100,
				imgWidth:100,
				
			};
		},
		onShow() {
			
		},
		mounted() {
			// this.creatQrCode()
		},
		watch:{
			
		},
		methods:{
			async	creatQrCode() {
					let data = await this.$http({
						url:this.$api.inviteFriends,
						method: 'POST',
						hideLoading: true,
						data: {}
					})
					if(data.code==200){
						this.qrUrl=data.data.poster_path
					}
				
				},
			share_qrcode(option) {
				console.log('option-------------',option);
				if (option) {	
					// this.info=option
				}
			},
			close(){
				this.$emit('close',false)
			},
// 保存到系统相册
				saveShareImg(base64) {
					uni.showLoading({
					  title: '正在生成图片'
					})
					// #ifdef H5
					this.savePicture(base64)	
					return									
					// #endif
						
				    const bitmap = new plus.nativeObj.Bitmap("test");
				    bitmap.loadBase64Data(base64, function() {
				        const url = "_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式
				        console.log('saveHeadImgFile', url)
				        bitmap.save(url, {
				            overwrite: true,  // 是否覆盖
				            quality: 'quality'  // 图片清晰度
				        }, (i) => {
				            uni.saveImageToPhotosAlbum({
				                filePath: url,
				                success: function() {
				                    uni.showToast({
				                        title: '图片保存成功',
				                        icon: 'none'
				                    })
									this.share=false
									uni.hideLoading()
				                    bitmap.clear()
				                }
				            });
				        }, (e) => {
				            uni.showToast({
				                title: '图片保存失败',
				                icon: 'none'
				            })
							uni.hideLoading()
				            bitmap.clear()
				        });
				    }, (e) => {
				        uni.showToast({
				            title: '图片保存失败',
				            icon: 'none'
				        })
						uni.hideLoading()
				        bitmap.clear()
				    });
				},
				savePicture(base64) {
					var arr = base64.split(',');
					var bytes = atob(arr[1]);
					let ab = new ArrayBuffer(bytes.length);
					let ia = new Uint8Array(ab);
					for (let i = 0; i < bytes.length; i++) {
						ia[i] = bytes.charCodeAt(i);
					}
					var blob = new Blob([ab], {
						type: 'application/octet-stream'
					});
					var url = URL.createObjectURL(blob);
					var a = document.createElement('a');
					a.href = url;
					a.download = new Date().valueOf() + ".png";
					var e = document.createEvent('MouseEvents');
					e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
					a.dispatchEvent(e);
					URL.revokeObjectURL(url);
					uni.showToast({
						title: '保存成功！'
					});
					uni.hideLoading()
				}
			
		},
		
	}
	
</script>
<script module="html2canvas" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
	props:{
		domId:''
	},
	data(){
		return{
			imgUrl:''
		}
	},
    methods: {
        toImage () {
        	let imgHeight = document.querySelector('#html2canvas').offsetHeight // 获取DOM高度
        	let imgWidth = document.querySelector('#html2canvas').offsetWidth // 获取DOM宽度
        	html2canvas(document.querySelector('#html2canvas'), {
        		width: imgWidth,
        		height:imgHeight,
        		backgroundColor: null,
        		useCORS: true // 解决文件跨域问题
        	}).then(canvas => {
        		const url = canvas.toDataURL('image/png') // 生成的图片
        		// 可以上传后端或者直接显示
        		console.log('[生成图片-------------]',url)
        	})   
        },
		async create(domId) {
			console.log('执行',domId)
		            try {
		                const timeout = setTimeout(async ()=> {
		                    const shareContent = document.querySelector('#html2canvas');
		                    const canvas = await html2canvas(shareContent,{
		                        width: shareContent.offsetWidth,//设置canvas尺寸与所截图尺寸相同，防止白边
		                        height: shareContent.offsetHeight,//防止白边
		                        logging: true,
		                        useCORS: true,
								backgroundColor:null,
								scale:2,
								dpi:1000
								});
							const base64 = canvas.toDataURL('image/png', 2); 
		                   	this.$ownerInstance.callMethod('saveShareImg', base64);
		                    clearTimeout(timeout);
		                }, 500);
		            } catch(error){
		                console.log("错误",error)
		            }
		        }
    }
}
</script>
<style lang="scss" scoped>
	.main{
	.pic{
		height: 84rpx;
		width: 84rpx;
		border-radius: 100%;
		margin-right: 10rpx;
		position: absolute;
		top: 20rpx;
		z-index: 9999;
		right: 30rpx;
	}
		.content{
			position: fixed;
			left: 0vw;
			top: 50%;		
			transform: translate(-50%,-50%);
			left: 50%;
			width: 642rpx;
			border-radius: 50rpx;
		z-index: 9999;
		min-height: 980rpx;
		.box{	
			background-size: 100% auto;
			background-position: top center; 
			width: 642rpx;			
			min-height: 980rpx;
			position: relative;
			border-radius: 50rpx;
			.bg{
				width: 642rpx;	
				height: 100%;
				position: absolute;
				top: 0;
				z-index: 10; 
				
			}
		}
			.stop{
				display: flex;
				padding-top: 656rpx;
				margin-left: 32rpx;
				position: relative;
				z-index: 99;
				.right{
					display: flex;
					align-items: flex-start;
					flex-direction: column;
					
					.txt{
						font-size: 32rpx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 40rpx;
					}
					.txts{
					font-size: 24rpx;
					font-weight: 400;
					color: #BBBBBB;
					line-height: 34rpx;
					margin-top: 10rpx;
					}
				}
			}
			.cont{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: row;
				width:calc(100% - 40rpx);
				background: #171819;
				border-radius: 36rpx;
			border-radius: 40rpx;
				margin:20rpx;
			padding: 20rpx 0;
			z-index: 99; 
			position: relative;
				.title{
					display: flex;
					align-items: flex-start;
					justify-content: flex-start;
					font-weight: 600;
					font-size: 36rpx;
					color: #FFF0CF;
					margin-left: 20rpx;
					line-height: 50rpx;
					.qr{
						color: #B2A893;
						margin-left: 20rpx;
						margin-right: 10rpx;
						border-radius: 8rpx;
						opacity: 0.5;
						font-size: 24rpx;
						padding: 0 10rpx;
						border: 2px solid #B2A893;
					}
					.fzico{
						height: 28rpx;
						width: 28rpx;
					}
					
				}
				.qrcode{
					margin: 6rpx auto;
					
				    .img {
				       width: 158rpx;
				       height: 158rpx;
				        background-color: #fff; //设置白色背景色
				        padding: 6rpx; // 利用padding的特性，挤出白边
				        box-sizing: border-box;
						border-radius: 8rpx;
				    }
				}
				.tips{
					font-size: 20rpx;
					font-weight: 400;
					color: #BBBBBB;
					line-height: 34rpx;
					margin-left: 20rpx;
					margin-top: 10rpx;
				}
			}
		}
		
		
		.card{
			width: 100%;
			// height: 408rpx;
			background: #1E2020;
			border-radius: 32rpx 32rpx 0px 0px;
			padding: 60rpx 0rpx;
			.title{
				font-size: 28rpx;
				font-weight: 600;
				color: #C1C1C1;
				line-height: 40rpx;
				margin:0rpx 64rpx;
			}
			.imglist{
				display: flex;
				align-items: center;
				justify-content: space-between;
				    width: calc(100% - 128rpx);
					margin: 58rpx auto 0;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					.ico{height: 88rpx;width: 88rpx; }
					.ti-external-link{
						font-size: 28rpx;
						font-weight: 600;
						color: #C1C1C1;
						line-height: 40rpx;
						margin-top: 22rpx;
						margin-bottom: 40rpx;
					}
				}
			}
		}
		.img{
			padding: 90rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		
		::v-deep .u-popup__content {
			background-color:rgba(0,0,0,0.3)!important
		}
		.btn{
			background: #F2E0BC;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #4E422C;
			text-align: center;
			margin-top: 50rpx;
			border-radius: 8rpx;
		}
	}
</style>
